import { Directive, ElementRef, Input, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  // @Input('appHighlight') highColor = 'transparent';
  @Input() highColor = 'transparent';
  constructor(private el: ElementRef) {
    // console.log('el:', this.el.nativeElement);
  }
  @HostListener('mouseenter', ['$event']) onMouseEnter() {
    this.highLight(this.highColor);
  }
  @HostListener('mouseleave', ['$event']) onMouseLeave() {
    this.highLight('white');
  }
  private highLight(color: string) {
    this.el.nativeElement.style.background = color;
  }
}
